<template>
  <div class="playlist">
    <!-- 头部返回 -->
    <div class="goback">
      <span @click="$router.back()" class="iconfont icon-fanhui"></span>
    </div>
    <!-- 歌曲信息 -->
    <div class="songdetail">
      <img :src="songdetail?.picUrl" alt="" />
      <span>I'm a Mess (with YUNGBLUD)</span>
      <span>Avril Lavigne / YUNGBLUD</span>
    </div>
    <!--歌曲选项-->
    <div class="selectors">
      <div class="model">
        <span class="iconfont icon-zhuanji"></span>
        <span>专辑</span>
      </div>
      <div class="model">
        <span class="iconfont icon-fenxiang"></span>
        <span>分享</span>
      </div>
      <div class="model">
        <span class="iconfont icon-tianjiadao"></span>
        <span>添加到</span>
      </div>
      <div class="model">
        <span class="iconfont icon-pinglun1"></span>
        <span>评论</span>
      </div>
      <div class="model">
        <span class="iconfont icon-xiazai"></span>
        <span>下载</span>
      </div>
      <div class="model">
        <span class="iconfont icon-bofang"></span>
        <span>视频</span>
      </div>
      <div class="model">
        <span class="iconfont icon-buxihuan"></span>
        <span>不喜欢</span>
      </div>
      <div class="model">
        <span class="iconfont icon-gouwudai"></span>
        <span>购买</span>
      </div>
    </div>
    <!-- 播放方式 -->
    <div class="playway">
      <div class="wayleft" @click="$store.commit('changeway')">
        <span
          v-if="way % 3 == 1 ? true : false"
          class="iconfont icon-xunhuanbofang"
        ></span>
        <span
          v-if="way % 3 == 2 ? true : false"
          class="iconfont icon-24gl-repeatOnce2"
        ></span>
        <span
          v-if="way % 3 == 0 ? true : false"
          class="iconfont icon-suijibofang"
        ></span>
        <span> 播放列表 {{ playlist.length }} </span>
      </div>
      <div class="wayright">
        <span class="iconfont icon-total_selection"> </span>
      </div>
    </div>
    <!-- 播放列表 -->
    <div class="playlist" v-if="playlist">
      <music :id="item.id" v-for="item in playlist" class="list"></music>
    </div>
    <!-- 分享弹起框 -->
    <van-popover trigger="click" placement="bottom">
      <van-grid
        square
        clickable
        :border="false"
        column-num="3"
        style="width: 240px"
      >
        
          <van-grid-item>
              <span>有希望吗</span>
          </van-grid-item>
      </van-grid>

      <template #reference>
        <van-button type="primary">自定义内容</van-button>
      </template>
    </van-popover>
  </div>
</template>

<script>
import { get } from "../http/request";

import { mapState, mapGetters } from "vuex";

import music from "../components/Small/music.vue";

export default {
  components: {
    music,
  },
  data() {
    return {
      songdetail: null,
      creatordetail: null,
    };
  },
  watch: {
    way: {
      handler(newValue) {
        if (newValue % 3 == 1) {
          this.$store.commit("changesonglist", this.playlist);
        } else if (newValue % 3 == 1) {
          this.$store.commit("changesonglist", this.circlelist);
        } else if (newValue % 3 == 0) {
          this.$store.commit("changesonglist", this.randomlist);
        }
      },
      immediate: true,
    },
  },

  computed: {
    ...mapState(["song", "playlist", "way"]),
    ...mapGetters(["randomlist", "circlelist"]),
  },
  mounted() {
    // this.song=this.$store.state.song

    // console.log(this.$store.state.songid);

    get(`/song/detail?ids=${this.$store.state.songid}`).then((res) => {
      //    console.log(res);

      this.songdetail = res.data.songs[0]?.al;

      this.creatordetail = res.data.songs[0]?.alia;

      //    console.log(this.songdetail);
    });
  },
};
</script>
<style lang="scss" scoped>
@import url(../comman/css/playlistview.css);
</style>
